<template>
    <div id="pay">
        <ToolBar3 :names="names"></ToolBar3>
        <div class="content">
            <div class="pay-box">
                <div class="list-item" v-for="(l,index) in list" :key="index" :class="default_id===l.id?'active':''" @click="checkgear(l.id)">
                    <p>{{l.desc}}</p>
                    <p>￥{{l.price}}</p>
                </div>

            </div>

            <div class="qr-code">
                <div class="qr-img">
<!--                    <p>推荐使用微信支付</p>-->
                    <img :src="info" alt="">
<!--                    <p>用户名</p>-->
                </div>

            </div>
            <p class="wxPay">
<!--                <img :src="wxPay" alt="">微信支付-->
            </p>

            <p class="notice">
                支付时输入对应金额且添加备注注册的手机号码, 若未及时开通, 请联系客服微信AIBinance_com
            </p>
            <p class="tips">
                温馨提示：<font color="#14A365">订阅12个月</font>或<font color="#14A365">永久服务</font>才可开启策略跟单；若使用支付宝、USDT支付请联系客服微信
            </p>
        </div>
    </div>
</template>

<script>
    import ToolBar3 from "../Task/ToolBar3";
    import qrCode from "@/assets/img/img_qr.png"
    import wxPay from "@/assets/img/ic_pay_wx@2x.png"
    export default {
        name: "Pay",
        components: {ToolBar3},
        data(){
            return {
                names:'订阅服务',
                qrCode:qrCode,
                wxPay:wxPay,
                type:1,
                list:[],
                default_id:'',
                info:{}
            }
        },
        mounted() {
            this.$api.my.getgearlist(this.getCookie('token'),this.type).then(res=> {
                // 执行某些操作
                this.list = res.data.data
                this.default_id = res.data.data[0].id
            })
            this.$api.task.payqr(this.getCookie('token')).then(res=> {
                // 执行某些操作
                this.info = res.data.data
            })
        },
        methods:{
            checkgear(id){
                this.default_id = id
            }
        }
    }
</script>

<style scoped>
    .content{
        position: absolute;
        top: 3rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
    }
    .pay-box{
        padding: 0.5rem 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 17rem;
        flex-wrap: wrap;
    }
    .list-item{
        width:6.5rem;
        height:7.31rem;
        background:rgba(255,255,255,1);
        border:1px solid rgba(204,204,204,1);
        border-radius:0.1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0 2rem 0;
        flex-wrap: wrap;
        margin-right: 1.5rem;
    }
    .list-item:nth-child(3n){
        margin-right: 0;
    }
    .list-item.active{
        border:1px solid rgba(20,163,101,1);
        background: url("../../assets/img/img_check.png")no-repeat;
        background-size: 2.34rem 1.94rem;
        background-position: bottom right;

    }
    .list-item p{
        width: 100%;
        text-align: center;
    }
    .list-item p:first-child{
        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
    }
    .list-item p:last-child{
        font-size:1.25rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(20,163,101,1);
    }
    .qr-code{
        /*padding: 0 1rem;*/
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .qr-img{
        width:11.56rem;
        /*height:12.5rem;*/
        background:rgba(20,163,101,1);
        border-radius:0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        /*padding: 0.5rem;*/
    }
    .qr-img p{
        width: 100%;
        text-align: center;
    }
    .qr-img p:first-child{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .qr-img p:last-child{
        font-size:0.69rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
    }
    .qr-img img{
        /*width:7.25rem;*/
        /*height:7.22rem;*/
        width: 100%;
    }
    .wxPay{
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 1rem auto;
    }
    .wxPay img{
        width: 1.19rem;
        margin-right: 0.5rem;
    }
    .notice{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(254,79,66,1);
        line-height:1.13rem;
        text-align: left;
        padding: 0 1rem;
        margin: 2rem auto;
    }
    .tips{
        font-size:0.69rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:1.13rem;
        text-align: left;
        padding: 0 1rem;
    }
</style>